.file-box {
  width: 100%;

  .path-box {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
    .path-left {
      padding: 12px 0;
      .line {
        margin: 0 5px;
        color: #ccc;

        &:last-child {
          display: none;
        }
      }
    }

  }

  .file-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 15px;

    .dir {
      width: 200px;
      padding: 10px;
      margin: 10px;
      box-sizing: border-box;
      cursor: pointer;

      img {
        display: block;
        width: 100%;
        transition: all .8s;
      }

      .name {
        text-align: center;
      }

      &:hover img {
        transform: scale(1.02) rotate(-10deg);
      }
    }

    .file {
      display: flex;
      width: 240px;
      height: 240px;
      margin: 10px;
      padding: 15px 15px 0;
      box-sizing: border-box;
      flex-direction: column;
      box-shadow: 0 0 6px #ccc;
      background: #fff;

      .img-box {
        flex: 1;
        box-sizing: border-box;
        overflow: hidden;
        background-size: cover;

        img {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
        }
      }

      .name {
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        overflow: hidden;
        line-height: 24px;
        height: 24px;
        margin: 0;
      }

    }
  }
}